<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">

    <ui:define name="title">
        DataTable <span class="subitem">ColumnToggler</span>
    </ui:define>

    <ui:define name="description">
        ColumnToggler is a helper component of datatable to toggle the visibility of columns.
    </ui:define>

    <ui:param name="documentationLink" value="/components/datatable"/>
    <ui:param name="widgetLink" value="DataTable-1"/>

    <ui:define name="implementation">
    <h:form>
        <p:growl>
            <p:autoUpdate />
        </p:growl>
        <div class="card">
        <div class="flex justify-content-between">
           <div>
           </div>
           <div>
              <p:commandButton value="XLSX" styleClass="mr-2 mb-2" >
                  <p:dataExporter type="xlsxstream" target="products" fileName="visible" visibleOnly="true"/>
              </p:commandButton>

              <p:commandButton value="PDF" styleClass="mr-2 mb-2" >
                  <p:dataExporter type="pdf" target="products" fileName="visible" visibleOnly="true"/>
              </p:commandButton>
           </div>
        </div>
            <p:dataTable id="products" var="product" value="#{dtBasicView.products}">
                <f:facet name="header">
                    <div class="flex justify-content-between align-items-center">
                        List of Products

                        <div>
                            <p:commandButton id="toggler" type="button" value="Columns" icon="pi pi-align-justify"/>
                            <p:columnToggler datasource="products" trigger="toggler">
                                <p:ajax event="toggle" listener="#{dtBasicView.onToggle}"/>
                            </p:columnToggler>
                        </div>
                    </div>
                </f:facet>

                <p:column ariaHeaderText="Code">
                    <f:facet name="header">
                        <h:outputText value="Code" title="Code"/>
                    </f:facet>
                    <h:outputText value="#{product.code}" />
                </p:column>

                <p:column headerText="Name">
                    <h:outputText value="#{product.name}" />
                </p:column>

                <p:column headerText="Category">
                    <h:outputText value="#{product.category}" />
                </p:column>

                <p:column headerText="Quantity" visible="false">
                    <h:outputText value="#{product.quantity}" />
                </p:column>

                <p:column headerText="Price">
                    <h:outputText value="#{product.price}">
                        <f:convertNumber type="currency" currencySymbol="$"/>
                    </h:outputText>
                </p:column>
            </p:dataTable>
        </div>
        </h:form>
    </ui:define>

</ui:composition>
